<template>
  <div class="hello">
     <div>hellow</div>
      <div v-for="(item,value) in arr" :key="value">
          <div>{{item.class}}</div>
      </div>
  </div>
</template>

<script>
import axios from 'axios';
import qs from 'qs';
export default {
  name: 'Main',
  data()
  {
      return {
        //   name:'',
        //   age:''
        arr:''
      }
  },
  methods:{
      getdata(){
          console.log('函数执行了');
                axios({
                    url:`/API/student/all`, //后端的接口地址                    	
                    method:"get",//注意，这里没有s！！！
                    transformRequest:[
                        function(data){
                            data = qs.stringify(data);
                            return data;
                        },
                    ],
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
                    },
                    dataType:"json",
                })
                .then((res) => {
                    console.log("连接成功");//这里打印出来是为了更直观的看到连接成功了
                    console.log(res); //res是后端返回来的数据，如果连接成功，则把res打印出来
                    this.arr = res.data.data//这里进行传回数据的赋值
                    //this.age = res.data.msg[0].sage //让本页的数据等于回传的数据
                })
                .catch(function(error){
                    console.log("连接失败");
                    console.log(error); //如果连接失败，则抛出错误的信息
                });
      }
  },
  created(){
      this.getdata();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

</style>
